<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UserList</title>

<!-- ================================= CSS ===========================================  -->
<style type="text/css">
	*{
		font-size: 16px;
		margin: 0;
		padding: 0;
	}
	div{
		width: 1000px;
		margin: 0 auto;
		margin-top: 10px;
	}
	table{
		width: 100%;
		
	}
	.table_list{
		border: solid 1px;
		border-collapse: collapse;
	}
	.table_list th, td{
		border: solid 1px gray;
		padding: 5px;
		text-align: center;
	}
	h4{
		margin-bottom: 5px;
	}
	p{
		padding: 5px;
		margin-bottom: 5px;
	}
	input{
		padding: 3px;
	}
</style>

<!-- ================================= JavaScript ===========================================  -->

<script type="text/javascript" src="/lib/jquery-3.4.1.js"></script>
<script type="text/javascript">
	//	初始化区域
	$(function(){
		//	申请后台数据
		// $.post("url",[params], [function()] ) 参数3：回调函数 
		$.post("/um_ajax/userList", function(result){
			if(result.status == "1"){
				console.log(result);	
				
				//$.each(list, function()); 
				$.each(result.userList, function(index, user){
					//	创建tr行对象
					var $tr = $('<tr></tr>');
					
					//	创建td单元格对象
					var $td1 = $('<td>'+ user.account +'</td>');
					var $td2 = $('<td>'+ user.name +'</td>');
					var $td3 = $('<td>'+ user.job +'</td>');
					var $td4 = $('<td>'+ user.deptName +'</td>');
					var $td5 = $('<td></td>');
					
					//	创建超链接对象
					var $a1 = $('<a href="/um/toUpdate?id='+ user.id+ '"> 修改  </a>');
					var $a2 = $('<a href="javascript:delUser(id, name)">删除</a> ')
					
					//a加入到td中
					$td5.append($a1);
					$td5.append($a2);
					
					//td加入到tr中
					$tr.append($td1);
					$tr.append($td2);
					$tr.append($td3);
					$tr.append($td4);
					$tr.append($td5);
					
					$('.table_list').append($tr);					
				}); 
				
			/*		
				<tr>
					<td></td>
					<td></td>
					<td></td>			
					<td></td>					
					<td>
						<a href="/um/toUpdate?id=<%=user.getId() %>">修改</a> &nbsp;&nbsp;&nbsp;
						<!-- <a href="/um/doDelete?id=<%=user.getId() %>">删除</a> 	 -->			
						<a href="javascript:delUser(<%=user.getId() %>,'<%=user.getName() %>')">删除</a> 				
					</td>		
				</tr>
				*/
			}else{
				alert("无法获取数据，请与管理员联系！");
			}
		});
		
		//	查找用户数据
		$('#btnSearch').click(function(){
			var strAccount = $('#txtQuery').val();
			console.log("txtQuery= "+strAccount);	
			$.post("/um_ajax/userListByName", {account:strAccount}, function(result){
				 if(result.status == "1"){
					 console.log(result);	
					 //	清空除表头外的行数据
					 $("#table  tr:not(:first)").empty("");
						//$.each(list, function()); 
						$.each(result.userList, function(index, user){
							//	创建tr行对象
							var $tr = $('<tr></tr>');
							
							//	创建td单元格对象
							var $td1 = $('<td>'+ user.account +'</td>');
							var $td2 = $('<td>'+ user.name +'</td>');
							var $td3 = $('<td>'+ user.job +'</td>');
							var $td4 = $('<td>'+ user.deptName +'</td>');
							var $td5 = $('<td></td>');
							
							//创建超链接对象
							var $a1 = $('<a href="/um/toUpdate?id='+ user.id+ '"> 修改  </a>');
							var $a2 = $('<a href="javascript:delUser(id, name)">删除</a> ')
							
							//a加入到td中
							$td5.append($a1);
							$td5.append($a2);
							
							//td加入到tr中
							$tr.append($td1);
							$tr.append($td2);
							$tr.append($td3);
							$tr.append($td4);
							$tr.append($td5);
							
							$('.table_list').append($tr);					
						}); 
				 }
				 else{
						alert("无法获取数据，请与管理员联系！");
				}
			});
		});
		
		//	增加用户 =============！未改！=============================
		$('#btnAdd').click(function(){
			$('#frm').attr("action","/um/toAdd");
			$('#frm').submit();
		});
		
		//	删除用户 =============！未改！=============================
	});

	function delUser(id,name){
		var msg = "确认删除用户：" + name + "？";
		msg += "\n单击确认将执行删除，单击取消则撤销删除。";
		if(confirm(msg) == true){
			var frm = document.getElementById('frm');
			frm.action = "/um/doDelete?id=" + id;
			frm.submit();
		}
	}
</script>
</head>

<!-- ================================= Body ===========================================  -->
<body>
	<div>
		<h4>系统用户查询</h4>
		<form>
		<p>
			<input type="search" id="txtQuery" placeholder="请输入用户名" >
			<input type="button" value="查询用户" id="btnSearch">
			<input type="button" value="增加用户 " id="btnAdd">
		</p>
		</form>			
		<hr>			
		<h4>系统用户列表</h4>
			<table id="table" class="table_list">
				<tr>
					<th>系统账户</th>
					<th>用户名</th>
					<th>岗位</th>
					<th>部门</th>
					<th>操作</th>			
				</tr>
		
		</table>
		
	</div>
</body>
</html>